<template>
	<footer class="footer_guide border-1px">
	    <a href="javascript:;" class="guide_item" :class="{on : $route.path == '/msite'}" @click="goto('/msite')">
	      <span class="item_icon">
	        <i class="iconfont icon-waimai"></i>
	      </span>
	      <span>外卖</span>
	    </a>
	    <a href="javascript:;" class="guide_item" :class="{on : $route.path == '/search'}" @click="goto('/search')">
	      <span class="item_icon">
	        <i class="iconfont icon-search"></i>
	      </span>
	      <span>搜索</span>
	    </a>
	    <a href="javascript:;" class="guide_item" :class="{on : $route.path == '/order'}" @click="goto('/order')">
	      <span class="item_icon">
	        <i class="iconfont icon-dingdan"></i>
	      </span>
	      <span>订单</span>
	    </a>
	    <a href="javascript:;" class="guide_item" :class="{on : $route.path == '/profile'}" @click="goto('/profile')">
	      <span class="item_icon">
	        <i class="iconfont icon-geren"></i>
	      </span>
	      <span>我的</span>
	    </a>
	  </footer>
</template>

<script>
	export default{
		name:'Footer',
		methods:{
			goto(path){
				console.log(path);
				this.$router.push(path)
			}
		}
	}
</script>

<style lang="stylus">
	@import "../../common/stylus/mixins.styl"
	#app {
	  width: 100%;
	  height: 100%;
	  background: #f5f5f5;
	  position: relative;
	}
	#app .footer_guide {
		border-top: 1px solid #e4e4e4;
	  position: relative;
	  position: fixed;
	  z-index: 100;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #fff;
	  width: 100%;
	  height: 50px;
	  display: flex;
	}
	#app .footer_guide::before {
	  content: '';
	  position: absolute;
	  z-index: 200;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 1px;
	  background-color: #e4e4e4;
	}
	#app .footer_guide .guide_item {
	  display: flex;
	  flex: 1;
	  text-align: center;
	  flex-direction: column;
	  align-items: center;
	  margin: 5px;
	  color: #999;
	}
	#app .footer_guide .guide_item.on {
	  color: #02a774;
	}
	#app .footer_guide .guide_item span {
	  font-size: 12px;
	  margin-top: 2px;
	  margin-bottom: 2px;
	}
	#app .footer_guide .guide_item span .iconfont {
	  font-size: 22px;
	}
</style>